<template>
  <div class="user-contain">
    <div class="header">
      <div class="avatar">
        <van-uploader
          :before-read="beforeRead"
          :after-read="afterRead"
          name="avatar"
        >
          <img :src="avatar" />
        </van-uploader>
      </div>
      <div class="middle">
        <span v-if="shopStore.token"
          >用户名：{{ shopStore.userInfo.username }}</span
        >
        <van-button v-else round type="danger" @click="$router.push('login')"
          >立即登录</van-button
        >
      </div>
      <div class="setting" @click="$router.push('/setting')">
        <van-icon name="setting-o" />
        <span>设置</span>
      </div>
    </div>
    <van-grid :border="false" :column-num="3">
      <van-grid-item @click="$router.push('/order')">
        <van-icon name="orders-o" />
        <span class="text">我的订单</span>
      </van-grid-item>
      <van-grid-item @click="$router.push('/address')">
        <van-icon name="guide-o" />
        <span class="text">地址管理</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="like-o" @click="$router.push('/history')" />
        <span class="text">我的足迹</span>
      </van-grid-item>
    </van-grid>
    <goods></goods>
  </div>
</template>

<script setup>
import { Toast } from "vant";
import goods from "@/components/Goods.vue";
import { upload } from "@/api";
import { computed } from "vue";
import { useRouter } from "vue-router";
const $router = useRouter();
import useShopStore from "@/store/shop";
const shopStore = useShopStore();

import defaultAvatar from "../assets/images/default_avatar.png";
let avatar = computed(() => {
  if (shopStore.userInfo.avatar) {
    return import.meta.env.VITE_API_IP + "/" + shopStore.userInfo.avatar;
  } else {
    return defaultAvatar;
  }
});

const beforeRead = (file) => {
  if (!shopStore.token) {
    $router.push("/login");
    return false;
  }
  if (file.type !== "image/jpeg") {
    Toast("请上传 jpg 格式图片");
    return false;
  }
  return true;
};

const afterRead = async ({ file }) => {
  let formData = new FormData();
  formData.append("avatar", file);
  let { src, status } = await upload(formData);
  if (status === 0) {
    shopStore.setAvatar(src);
  }
};
</script>

<style lang="scss" scoped>
.user-contain {
  .header {
    display: flex;
    justify-content: space-between;
    height: 108px;
    background: #d5d5b7;
    border-radius: 10px;

    .avatar {
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 60px;
        height: 60px;
        margin: 10px;
        border-radius: 30px;
      }
    }

    .middle {
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        font-size: 20px;
      }
    }

    .setting {
      display: flex;
      flex-direction: column;
      margin: 10px;

      span {
        font-size: 14px;
      }
    }
  }

  .van-grid {
    margin: 10px 0;
    border-radius: 10px;

    .van-icon {
      font-size: 30px;
    }

    .text {
      font-size: 14px;
    }
  }

  .van-divider {
    border-color: #c3c5c8;
  }
}
</style>